<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${applicationScope.basePath}/css/register.css">
</head>
<body>
<div class="title">
    <h1 style="text-align: center;">欢迎注册<img src="${applicationScope.basePath}/images/login_logo.png">二手交易平台</h1>
</div>
<div class="box">
    <span class="box_top_left">新用户注册</span>
    <span class="box_top_right">已有账号?<a href="${applicationScope.basePath}/login">立即登录</a></span>
    <div class="box_center">
        <form id="registerForm">
            <table class="table_center">
                <tr>
                    <td class="td_left"><label for="usernameID">用户名</label></td>
                    <td class="td_right"><input required="required" type="text" id="usernameID" name="userName" placeholder="请输入3~8个字符"></td>
                </tr>
                <tr>
                    <td class="td_left"><label for="passwordID">密码</label></td>
                    <td class="td_right"><input required="required" type="text" id="passwordID" name="password" placeholder="请输入6~11个字符"
                                                onkeyup=""></td>
                </tr>
                <tr>
                    <td class="td_left"><label>性别</label></td>
                    <td class="td_right">
                        <input type="radio" name="sex" value="1" checked>男
                        <input type="radio" name="sex" value="0">女
                    </td>
                </tr>
                <tr>
                    <td class="td_left"><label for="emailID">邮箱</label></td>
                    <td class="td_right"><input required="required" type="email" id="emailID" name="email" placeholder="请输入邮箱"></td>
                </tr>
                <tr>
                    <td class="td_left"><label for="phoneID">手机号</label></td>
                    <td class="td_right"><input required="required" type="text" id="phoneID" name="phone" placeholder="请输入手机号"
                                                onkeyup=""></td>
                </tr>
                <tr>
                    <td class="td_left"><label for="checkCodeID">验证码</label></td>
                    <td class="td_right"><input required="required" type="text" id="checkCodeID" name="checkCode" placeholder="请输入验证码">
                        <a href="javascript:refreshCode();"><img id="img_check" title="看不清点击刷新" onclick="refreshCode();"
                                                                 src="${applicationScope.basePath}/user/checkCode"></a>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td align="center">
                        <input  type="submit" id="btn_sub" value="注册"/>
                        <button type="reset" id="btn_reset" onclick="refreshCode();">重置</button>
                    </td>
                    <td></td>
                </tr>
            </table>
        </form>
        <!-- 出错显示的信息 -->
        <div align="center">
            <span id="errorMsg"  style="color: red;text-align: center;"></span>
        </div>
    </div>
</div>
<script src="${applicationScope.basePath}/js/jquery-3.4.1.min.js"></script>
<script src="${applicationScope.basePath}/js/jquery.serializejson.js"></script>
</body>
<script>
    //切换验证码图片
    function refreshCode() {
        //获取验证码对象
        let code = document.getElementById("img_check");
        //设置其src属性，加上上时间戳
        code.src = "${applicationScope.basePath}/user/checkCode?time=" + new Date().getTime();
    }
    $(function (encodedURIComponent) {
        //当表单提交的时候,校验所有
        $("#registerForm").submit(function (encodedURIComponent) {
            alert("1")
            //校验全部
            // if(check_username() && check_phone()){
            //     alert("2")
                //设置按钮不可用
                $("#btn_sub").attr("disabled", true);
                //获取表单信息,转化为json字符串
                let data = JSON.stringify($("#registerForm").serializeJSON());
                $("#errorMsg").text("请稍后。。。");
                //校验通过,发送ajax请求,提交表单
                $.ajax({
                    url : "${applicationScope.basePath}/user/checkRegister",
                    type : "POST",
                    dataType:"json",
                    contentType : "application/json;charset=UTF-8",
                    <!-- 向后端传输的数据 -->
                    data : data,
                    success:function(data) {
                        alert("1")
                        alert(JSON.stringify(data))
                        // <!-- 处理后端返回的数据 -->
                        if(data.flag){
                            //注册成功,跳转到成功页面
                            if(confirm("注册成功，是否现在前往邮箱激活？")){
                                window.location.href = "https://mail.qq.com/";
                            }else{
                                window.location.href = "${applicationScope.basePath}/home";
                            }
                        }else{
                            //设置按钮可用
                            $("#btn_sub").attr("disabled",false);
                            //注册失败,显示异常信息
                            $("#img_check").attr("src","${applicationScope.basePath}/user/checkCode?time=" + new Date().getTime());
                            $("#errorMsg").text(data.errorMsg);
                        }
                    },
                    error:function(data){
                        //跳转到错误页面
                    }
                });
                // return false;
            // }
            return false;
        });

        //当某一组件失去焦点时调用校验
        $("#usernameID").blur(check_username);
        // $("#passwordID").blur(check_password);
        // $("#emailID").blur(check_email);
        $("#phoneID").blur(check_phone);
        // $("#checkCodeID").blur(check_code());
    });
</script>
</html>
